<template>
	<view class="container">
		<view class="box">
			<view>
				列表中选择商户账号
			</view>
			<view class="choose_account">			
				<view>
					<image src="../../static/icon/shanghuchaxun.png"></image>
				</view>			
				<view>
					<picker @change="bindPickerChange" :value="index" :range="array">
						<view>{{array[index]}}</view>
					</picker>
				</view>			
			</view>
			<view>
				<input type="number" placeholder="输入付款金额" class="amount" v-model="amount">
			</view>
		</view>
		<view>
			<button type="primary" @click="pay">立即付款</button>
		</view>
	</view>
</template>

<script>
	import Global from '../../common/global.js'
	
	export default {
		data() {
			return {
				customerNumber:'',
				array:['HK0001001000138656','HK0001001000162802','HK0001001000157856','HK0001001000152615'],
				index:0,
				amount:'',
				payLimit:''
			}
		},
		methods: {			
			// 选择框事件
			bindPickerChange: function(e) {			 
			    this.index = e.target.value
			},
			//付款操作
			pay(){
				//验证支付限额
				if (parseFloat(this.amount) > parseFloat(this.payLimit)) {
					uni.showToast({
						title:'当前支付超出支付限额，请先修改支付限额',
						icon:'none'
					})
					
					return
				}
				
				uni.navigateTo({
					url:'../pay_detail/pay_detail?merchantNumber=' + this.array[this.index] +
						'&amount=' + this.amount
				})			
			}
		},
		onLoad() {
			//读取出客户编号
			this.customerNumber = uni.getStorageSync('customerNumber')			
			//读取支付限额
			this.payLimit = uni.getStorageSync('payLimit')
		}
	}
</script>

<style>
	.container {		
		padding: 15rpx;
	}
	
	.box {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	
	.choose_account {
		font-size: 40rpx;
		display: flex;
		justify-content:space-around;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}

	.choose_account image {
		width: 50rpx;
		height: 50rpx;
	}
	
	.amount {
		width: 600rpx;
		height: 150rpx;
		color: #333333;
		font-size: 48rpx;
		border-bottom: 1px solid #C0C0C0;
		margin-bottom: 50rpx;
	}
</style>